<template>
  <el-row class="my-15px">
    <el-col :span="22" :offset="1">
      <div class="mb-15px">
        <el-button type="primary" @click="addProduct">添加产品</el-button>
        <el-button @click="addSupplier">添加品牌商</el-button>
      </div>
      <!-- <el-button></el-button> -->
      <el-table :data="tableData" border>
        <el-table-column
          type="index"
          width="70"
          label="序号"
          align="center"
          fixed="left"
        />
        <el-table-column
          prop="productModel"
          label="产品型号"
          width="180"
          align="center"
          fixed="left"
        >
          <template #default="scope">
            <el-input v-model="scope.row.productModel"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="productNum"
          label="数量"
          width="100"
          align="center"
          fixed="left"
        >
          <template v-slot="scope">
            <el-input v-model="scope.row.productNum"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="产品报价" align="center">
          <template v-for="(item, index) in supplierList" :key="index">
            <el-table-column
              :label="`品牌(${index + 1})`"
              min-width="180"
              prop="brand"
            >
              <template #default="scoped">
                <el-input
                  v-model="scoped.row.extVoList[index]['brand' + (index + 1)]"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="产品配置"
              min-width="180"
              prop="configuration"
            >
              <template #default="scoped">
                <el-input
                  v-model="
                    scoped.row.extVoList[index]['configuration' + (index + 1)]
                  "
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="产品报价及税率"
              min-width="180"
              prop="quotationTax"
            >
              <template #default="scoped">
                <el-input
                  v-model="
                    scoped.row.extVoList[index]['quotationTax' + (index + 1)]
                  "
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="供应商征信分" min-width="180" prop="credit">
              <template #default="scoped">
                <el-input
                  v-model="scoped.row.extVoList[index]['credit' + (index + 1)]"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="附件" prop="file" min-width="180">
              <template #default="scoped">
                <el-upload
                  class="upload-demo"
                  action="#"
                  :http-request="
                    parmas =>
                      handleFileChange(
                        parmas,
                        scoped.row.extVoList[index]['file' + (index + 1)]
                      )
                  "
                  accept=""
                  multiple
                  :show-file-list="false"
                >
                  <el-button type="default" style="font-size: 14px"
                    ><el-icon><UploadFilled /></el-icon>上传文件</el-button
                  >
                  <template #tip>
                    <div class="text-14px mt-10px" style="width: 100%">
                      <div
                        v-for="(m, n) in scoped.row.extVoList[index][
                          'file' + (index + 1)
                        ]"
                        :key="item.fileId"
                      >
                        <a :href="m.url" target="_blank" class="text-#409eff">{{
                          m.origFileName
                        }}</a>
                        <el-button text plain @click="delFileName(n)"
                          >删除</el-button
                        >
                      </div>
                    </div>
                  </template>
                </el-upload>
              </template>
            </el-table-column>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="80" fixed="right">
          <template v-slot="scope">
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</template>

<script setup>
import { uploadFile, delFile } from '@/api/salesManage/contractManage'
const { proxy } = getCurrentInstance()
const tableData = ref([])
const supplierList = ref([])

const emit = defineEmits(['updateTableList'])
function addProduct() {
  const addRow = {
    productModel: '',
    productNum: '',
    extVoList: []
  }
  if (!supplierList.value.length) {
    supplierList.value.push({
      brand1: '',
      configuration1: '',
      quotationTax1: '',
      credit1: '',
      file1: ''
    })
  }
  addRow.extVoList = supplierList.value.map((v, i) => ({
    ['brand' + (i + 1)]: '',
    ['configuration' + (i + 1)]: '',
    ['quotationTax' + (i + 1)]: '',
    ['credit' + (i + 1)]: '',
    ['file' + (i + 1)]: ''
  }))
  tableData.value.push(addRow)
  emit('updateTableList')
}
function addSupplier() {
  if (!tableData.value.length) {
    proxy.$modal.msgWarning('请先添加产品')
    return
  }
  const index = supplierList.value.length + 1
  const addCol = {
    ['brand' + index]: '',
    ['configuration' + index]: '',
    ['quotationTax' + index]: '',
    ['credit' + index]: '',
    ['file' + index]: ''
  }
  supplierList.value.push(addCol)
  tableData.value.forEach(v => {
    const obj = { ...addCol }
    v.extVoList.push(obj)
  })
  emit('updateTableList')
}

function handleDelete(index, row) {
  proxy.$modal.confirm('是否确认删除该产品信息？').then(function () {
    tableData.value.splice(index, 1)
    emit('updateTableList')
  })
}

function checkData() {}

// 附件上传
const fileList = ref([])

function beforeAvatarUpload(rawFile) {
  if (rawFile.size / 1024 / 1024 > 20) {
    proxy.$modal.msgError('单个文件不能超过20MB!')
    return false
  }
  return true
}

async function handleFileChange(params, row) {
  const checkResult = beforeAvatarUpload(params.file)
  if (!checkResult) return
  let formData = new FormData()
  formData.append('file', params.file)
  try {
    const res = await uploadFile(formData)
    if (res.code === 200 && res.data) {
      if (!row) {
        row = []
      }
      row.push(res.data)
    }
  } catch (error) {
    proxy.$modal.msgError(error)
  }
}

async function delFileName(index) {
  try {
    proxy.$modal.confirm('是否删除该文件').then(async () => {
      const file = fileList.value[index]
      const res = await delFile(file.fileName)
      if (res.code === 200) {
        fileList.value.splice(index, 1)
        proxy.$modal.msgSuccess(res.data)
      }
    })
  } catch (error) {
    proxy.$modal.msgError(error)
  }
}

defineExpose({
  tableData,
  checkData
})
</script>

<style scoped lang="scss"></style>
